<template>
  <div class="sourceComments-container">
    <div class="post-comment-box">
      <div class="title-sz">
        <span>发布评论</span>
      </div>
      <div>
        <el-input
          type="textarea"
          placeholder="请输入内容...."
          v-model="postMsg"
          maxlength="500"
          show-word-limit
          autofocus="false"
          class="comment-post-msg"
        >
        </el-input>
      </div>
      <div class="btn-box">
        <el-button type="primary" class="postMsg-btn" @click="postComment()"
          >提交评论</el-button
        >
      </div>
    </div>
    <div class="comments-box">
      <div class="comments-box-title">
        <div class="title">评论区</div>

        <div class="sort-box">
          <!-- 排序方式 -->
          <!-- <span>排序方式：</span>
          <el-select
            v-model="searchForm.sort"
            placeholder="请选择"
            @change="changeSortType()"
            style="width: 80px; border: none; color: #409eff; font-weight: bold"
          >
            <el-option
              v-for="item in sortTypeArray"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        </div>
      </div>
      <div class="All-comments">
        <!-- 这里是所有用户的评论 -->
        <div>
          <Acomment
            v-for="(AcommentData, index) in commentsList"
            :key="AcommentData.data.id"
            :AcommentData="AcommentData"
            :AcommentDatalenth="AcommentDatalenth"
            :ComIndex="index"
            :initCommentList="initCommentList"
          ></Acomment>
        </div>
        <div
          class="load-more"
          @click="CommentListloadMore()"
          v-show="commentsList.length"
        >
          <span>{{ loadFlag ? `点击加载更多` : `暂无更多数据` }}</span>
        </div>
        <div class="nothingForComments" v-show="!commentsList.length">
          <div class="blank"><noneDataPage></noneDataPage></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Acomment from "@/views/szptProjectPage/szptDataPage/Acomment.vue";
import noneDataPage from "@/components/szptPage/noneDataPage/index.vue";
// import {
//   comment,
//   getCommentsList,
//   postCommentMsg,
// } from "@/utils/szptUtils/commentPost.js";
import { getComments } from "@/api/szpt/initCommentList";
import { componentForPost } from "@/api/szpt/commentForPost.js";
// import { mapGetters } from "vuex";
// import commentList from "../../../store/modules/szpt_store/commentList";
// import { initCommentLists } from "../../../utils/szptUtils/upDateCommentList";
export default {
  components: {
    Acomment,
    noneDataPage,
  },
  name: "sourceComments",
  data() {
    return {
      postMsg: "",
      replyMsg: "",
      AcommentDatalenth: 0,
      szpt_comments_params: [],
      commentsList: [],
      searchForm: {
        entityId: this.$route.query.id,
        entityType: "POST",
        parentup: 0,
        parentdown: 0,
        childrenup: 0,
        childrendown: 0,
        sort: "hot",
      },
      loadFlag: true,
      loadNum: 5,
      lengthFlag: 0,
      sortTypeArray: [
        {
          label: "热门",
          value: "hot",
        },
        {
          label: "时间",
          value: "time",
        },
      ],
    };
  },
  computed: {
    // commentsList(){
    //   // return  this.$store.getters['commentList/getAllComments']
    // },
    userMsg() {
      return this.$store.getters["userData/getUserDataMsg"];
    },
  },
  watch: {
    // ...mapGetters('commentList',['getAllComments'])
  },
  methods: {
    changeSortType() {
      this.initCommentList(this.searchForm.sort);
    },
    /**
     * @description 顶层发布评论
     */
    postComment() {
      if (this.postMsg) {
        const commentData = {
          createUser: this.userMsg.data.userId,
          status: 0,
          parentId: null,
          content: this.postMsg,
          targetId: null,
          entityId: this.$route.query.id,
          entityType: "POST",
        };
        componentForPost(commentData)
          .then((resp) => {
            if (resp.code === 200 && resp.data) {
              this.$message.success("评论成功！");
              this.postMsg = "";
              setTimeout(() => {
                this.initCommentList("time");
              }, 800);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$modal.alertWarning("评论内容不能为空！");
      }
    },
    // 加载评论
    initCommentList(sortType) {
      this.$modal.loading("玩命加载中....");
      if (sortType) {
        this.searchForm.sort = sortType;
      } else {
        this.searchForm.sort = "hot";
      }
      window.sessionStorage.setItem(
        "sort",
        JSON.stringify(this.searchForm.sort)
      );
      getComments(this.searchForm)
        .then((resp) => {
          if (resp.code === 200 && resp.data.data) {
            this.commentsList = resp.data.data;
            this.lengthFlag = resp.data.data.length;
            this.$modal.closeLoading();
          }
        })
        .catch((err) => {
          console.log(err);
          this.$modal.closeLoading();
        });
    },
    // 加载更多评论
    CommentListloadMore() {
      this.$modal.loading("玩命加载中....");
      window.sessionStorage.setItem(
        "sort",
        JSON.stringify(this.searchForm.sort)
      );
      this.searchForm.parentdown = this.searchForm.parentdown + this.loadNum;
      getComments(this.searchForm)
        .then((resp) => {
          if (resp.code === 200 && resp.data) {
            this.commentsList = resp.data.data;
            if (this.lengthFlag === resp.data.data.length) {
              this.loadFlag = false;
            }
            this.lengthFlag = resp.data.data.length;
            this.$modal.closeLoading();
          }
        })
        .catch((err) => {
          console.log(err);
          this.$modal.closeLoading();
        });
    },
  },
  created() {
    // 获取后台字典值初始化评论区列表
    this.getDicts("szpt_comments_params").then((response) => {
      this.szpt_comments_params = response.data;
      this.searchForm.parentup = parseInt(
        this.szpt_comments_params[0].dictValue
      );
      this.searchForm.parentdown = parseInt(
        this.szpt_comments_params[1].dictValue
      );
      this.loadNum = parseInt(this.szpt_comments_params[1].dictValue);
      this.searchForm.childrenup = parseInt(
        this.szpt_comments_params[2].dictValue
      );
      this.searchForm.childrendown = parseInt(
        this.szpt_comments_params[3].dictValue
      );
      try {
        this.initCommentList("hot");
      } catch (e) {
        console.log(e);
      } finally {
      }
    });
  },
  mounted() {
    // 为鼠标添加点击事件监听
    document.addEventListener("mousedown", this.LostFocus);
  },

  beforeDestroy() {
    // 将添加的监听事件移除
    document.removeEventListener("mousedown", this.LostFocus);
  },
};
</script>
<style lang="scss" scoped>
.sourceComments-container {
  width: 100%;
  height: auto;
  min-height: 400px;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  padding: 20px;
}
/**
 * post-comment-box
 */
.post-comment-box {
  width: 100%;
  height: auto;
  min-height: 100px;
  background-color: #f7f8fc;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px 20px;
  position: relative;
  padding-bottom: 20px;
}
.comment-post-msg {
  font-size: 16px;
  border: none;
  background-color: transparent;
  outline: none;
}
.btn-box {
  margin-top: 15px;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}
.title-sz {
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #666;
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 50px;
}

/**
  * comments-box
  */
.comments-box {
  width: 100%;
  height: auto;
  min-height: 300px;
  margin-top: 30px;
  position: relative;
  padding: 10px 20px;
  border-radius: 10px;
  .comments-box-title {
    width: 100%;
    height: 50px;
    line-height: 38px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #ececec;
    .title {
      color: #666;
      font-size: 18px;
      font-weight: bold;
    }
    .sort-box {
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: flex-end;
      background-color: transparent;
      .sortSelect {
        width: 80px;
        border: none;
      }
      .el-input--medium .el-input__inner {
        border: none;
        color: #409eff;
        font-weight: bold;
      }
    }
  }
}
.All-comments {
  width: 100%;
  height: auto;
  min-height: 200px;
  background-color: transparent;
}

.sort-box span {
  display: inline-block;
  height: 100%;
  font-weight: bold;
  color: #666;
  margin-left: 20px;
  cursor: pointer;
}
.load-more {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  color: #00c2fd;
}
.load-more span {
  width: 100%;
  height: 100%;
}
.nothingForComments {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-content: center;
}
.blank {
  width: auto;
  height: auto;
  min-height: 50px;
  text-align: center;
  line-height: 100px;
  color: #999;
}
</style>
